<template>
  <div>
    <el-card shadow="always" style="margin: 30px">
      <div slot="header">
        <span>
          <el-upload
            ref="uploadImg"
            class="upload-demo"
            :before-upload="beforeUpload"
            action="/lejuAdmin/material/uploadFileOssSave"
            :headers="{ token }"
            :on-success="handleSuccess"
          >
            <el-button size="small" type="primary">点击上传素材</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过500kb</div>
          </el-upload>
        </span>
      </div>
      <div v-for="item in list" :key="item.id" class="box">
        <div shadow="always" class="card">
          <el-card shadow="always">
            <div slot="header">
              <span class="time">创建时间: {{ item.createTime }}</span>
            </div>
            <img
              :src="item.ossUrl"
              style="width: 100%;
              height: 250px"
            >
            <div class="btnBox">
              <el-button type="danger" size="mini" class="button" @click="doDel(item.id)">删除</el-button>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
    <el-pagination
      style="margin-top:30px; margin-right:30px; text-align: right"
      :current-page="start"
      :page-sizes="pageSize"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getToken } from '@/utils/myAuth'
import { findMaterialByPage, delMaterial } from '@/api/content/index'
export default {
  data() {
    return {
      list: [],
      start: 1,
      limit: 5,
      total: 0,
      pageSize: [5, 10, 15, 20]
    }
  },
  computed: {
    token() {
      return getToken()
    }
  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      findMaterialByPage(this.start, this.limit).then(res => {
        const { success, data, message: errmag } = res
        if (success) {
          const { rows, total } = data
          this.list = rows
          this.total = total
          console.log('data', data)
        } else {
          this.$message.error(errmag)
        }
      })
    },
    handleSuccess(response, file, fileList) {
      const { success, message: errMag } = response
      if (success) {
        this.$message.success('上传成功')
        this.$refs.uploadImg.clearFiles()
        this.init()
      } else {
        this.$message.error(errMag)
      }
    },
    beforeUpload(file) {
      var reg = /image\/(jpeg|png|jpg)/g
      const isImg = reg.test(file.type)
      const isLt2M = file.size / 1024 / 1024 < 0.5

      if (!isImg) {
        this.$message.error('上传头像只能是图片格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500kb!')
      }
      return isImg && isLt2M
    },
    handleSizeChange(val) {
      this.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      this.start = val
      this.init()
    },
    doDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMaterial(id).then(res => {
          const { success, message } = res
          console.log('1111', res)
          if (success) {
            this.init()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message.error(message)
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang="scss">
div{
  display: block;
 }
.box{
   width: 20%;
    float: left;
   .card{
    margin-bottom: 20px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    .time{
      font-size: 14px;
    }
    .btnBox{
      height: 48px;
      display: flex;
      flex-direction: row-reverse;
      .button{
        width: 90px;
        margin-top: 20px;
      }
    }
  }
}

</style>
